<template>
  <div class="nav">
    <div class="home" @click="home">首页</div>
    <div class="headerContent">
      <div class="headerChoice">
        <div class="passLogin" @click="loginType = true, tipMsg = ''" :class="{active: loginType}">
          密码登录
        </div>
        <div class="verifyLogin" @click="loginType = false, tipMsg = ''" :class="{active: !loginType}">
          验证码登录
        </div>
      </div>
      <div class="content">
        <tip :tip-msg="tipMsg" :tip-rank="'error'" :tip-style="{
          width: '330px',
          'padding-top': '10px'
        }"/>
        <div v-show="loginType">
          <div class="inputContent">
            <input-common
              :name="'accountAccount'"
              :placeholder="'请输入手机号'"
              :inputType="'phone'"
              @inputChange="inputChange"
            />
            <input-common
              class="inputCommon"
              :name="'password'"
              :placeholder="'请输入密码'"
              :inputType="'password'"
              @inputChange="inputChange"
            />
            <button-common
              class="inputCommon"
              btnMsg="登录"
              @buttonClick="accountLoginClick"
            />
          </div>
        </div>
        <div v-show="!loginType">
          <div class="inputContent">
            <input-common
              :name="'verifyAccount'"
              :placeholder="'请输入手机号'"
              :input-type="'phone'"
              @inputChange="inputPhone"
            />
            <div style="display: inline-block" class="inputCommon">
              <input-common
                style="float: left"
                :name="'verifyCode'"
                :placeholder="'验证码'"
                :inputStyle="{
                width: '198px'
              }"
                @inputChange="inputChange"
              />
              <verify-button
                style="float: right"
                :phone="phone"
                :url="loginMobileUrl"
                :btn-msg="'获取验证码'"
                @checkPhone="checkPhone"
              />
            </div>
            <button-common
              class="inputCommon"
              :btnMsg="'登录'"
              @buttonClick="verifyLoginClick"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import inputCommon from '../components/common/input'
  import labelCommon from '../components/common/label'
  import buttonCommon from '../components/common/button'
  import VerifyButton from "../components/common/verifyButton";
  import tip from "../components/common/tip";
  import commonUtil from "../util/common";
  import md5 from "../util/md5";

  export default {
    data() {
      return {
        loginType: true,
        postData: {},
        tipMsg: '',
        phone: '',
        loginMobileUrl: this.api.sendLoginSms,
      }
    },
    methods: {
      home() {
        this.$router.push("/")
      },
      inputChange(name, val) {
        this.postData[name] = val
      },
      inputPhone(name, val) {
        this.phone = val
      },
      accountLoginClick() {
        // 校验数据
        let account = this.postData['accountAccount']
        let password = this.postData['password']
        if (account === undefined || account === '') {
          this.tipMsg = '请输入手机号'
          return
        }
        if (!commonUtil.checkPhone(account)) {
          this.tipMsg = '手机号错误'
          return
        }
        if (password === undefined || password === '') {
          this.tipMsg = '请输入密码'
          return
        }
        if (password.length < 8 || password.length > 20) {
          this.tipMsg = '请输入正确密码'
          return
        }
        password = md5(password)

        this.$axios({
          url: this.api.loginAccount,
          params: {
            "account": account,
            "password": password
          },
          method: 'post'
        }).then(res => {
          if (res.state !== 0) {
            this.tipMsg = res.msg
          } else {
            this.$store.state.token = res.data.token
            this.$store.commit('setToken', res.data.token)
            this.$store.commit('setUserInfo', res.data)
            this.$router.push('/')
          }
        })
        // 登录
      },
      checkPhone() {
        let phone = this.phone
        if (phone === undefined) {
          this.tipMsg = '请输入手机号'
          return
        }
        if (!commonUtil.checkPhone(phone)) {
          this.tipMsg = '请检查手机号'
          return
        }
      },
      verifyLoginClick() {
        let phone = this.phone
        let code = this.postData['verifyCode']

        if (code === undefined || code === '') {
          this.tipMsg = '请输入验证码'
          return
        }

        // 发送验证码
        this.$axios({
          url: this.api.loginPhoneCode,
          method: 'post',
          params: {
            "phone": phone,
            "phoneCode": code,
          }
        }).then(res => {
          if (res.state !== 0) {
            this.tipMsg = res.msg
          } else {
            this.$store.commit('setToken', res.data.token)
            this.$store.commit('setUserInfo', res.data)
            this.$router.push('/')
          }
        })
      }
    },
    components: {
      VerifyButton,
      inputCommon,
      labelCommon,
      buttonCommon,
      tip
    }
  }
</script>

<style scoped>
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background: url(../assets/images/regs.jpg) no-repeat 50% 50%;
    z-index: 1;
  }

  .home {
    font-size: 25px;
    margin-top: 30px;
    cursor: pointer;
  }

  .headerContent {
    position: relative;
    top: 115px;
    left: 38%;
    width: 380px;
  }

  .active {
    border-bottom: 2px solid rgba(0, 153, 68, 1);
    border-radius: 1px;
  }

  .headerChoice {
    margin: 2px 0;
  }

  .passLogin {
    margin-right: 25%;
    cursor: pointer;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(98, 98, 98, 1);
    display: inline-block;
  }

  .verifyLogin {
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(98, 98, 98, 1);
  }

  .content {
    width: 380px;
    background: rgba(181, 181, 181, 1);
    opacity: 0.8;
  }

  .inputContent {
    padding: 28px 36px 20px 36px;
  }

  .inputCommon {
    margin-top: 46px;
  }
</style>
